$(function (){
   $('#Birds').on('mouseover',function (){
       $.ajax({
           type        :"GET",
           url         :"showWindowWhenMouseHover?CategoryId=Birds",
           success     :function (data){
               var inform = document.getElementById("inform");
               inform.innerText = data;
               inform.style.display = "block";
           }
       });
   });
   $('#Birds').on('mouseout',function (event){
       var informDiv = document.getElementById("inform");
       var x = event.clientX;
       var y = event.clientY;
       var divx1 = informDiv.offsetLeft;
       var divy1 = informDiv.offsetTop;
       var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
       var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
       if(x<divx1 || x>divx2 || y<divy1 || y>divy2){
           document.getElementById('inform').style.display = 'none';
       }
   });
    $('#Fish').on('mouseover',function (){
        $.ajax({
            type        :"GET",
            url         :"showWindowWhenMouseHover?CategoryId=Fish",
            success     :function (data){
                var inform = document.getElementById("inform");
                inform.innerText = data;
                inform.style.display = "block";
            }
        });
    });
    $('#Fish').on('mouseout',function (event){
        var informDiv = document.getElementById("inform");
        var x = event.clientX;
        var y = event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if(x<divx1 || x>divx2 || y<divy1 || y>divy2){
            document.getElementById('inform').style.display = 'none';
        }
    });
    $('#Dogs').on('mouseover',function (){
        $.ajax({
            type        :"GET",
            url         :"showWindowWhenMouseHover?CategoryId=Dogs",
            success     :function (data){
                var inform = document.getElementById("inform");
                inform.innerText = data;
                inform.style.display = "block";
            }
        });
    });
    $('#Dogs').on('mouseout',function (event){
        var informDiv = document.getElementById("inform");
        var x = event.clientX;
        var y = event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if(x<divx1 || x>divx2 || y<divy1 || y>divy2){
            document.getElementById('inform').style.display = 'none';
        }
    });
    $('#Reptiles').on('mouseover',function (){
        $.ajax({
            type        :"GET",
            url         :"showWindowWhenMouseHover?CategoryId=Reptiles",
            success     :function (data){
                var inform = document.getElementById("inform");
                inform.innerText = data;
                inform.style.display = "block";
            }
        });
    });
    $('#Reptiles').on('mouseout',function (event){
        var informDiv = document.getElementById("inform");
        var x = event.clientX;
        var y = event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if(x<divx1 || x>divx2 || y<divy1 || y>divy2){
            document.getElementById('inform').style.display = 'none';
        }
    });
    $('#Cats').on('mouseover',function (){
        $.ajax({
            type        :"GET",
            url         :"showWindowWhenMouseHover?CategoryId=Cats",
            success     :function (data){
                var inform = document.getElementById("inform");
                inform.innerText = data;
                inform.style.display = "block";
            }
        });
    });
    $('#Cats').on('mouseout',function (event){
        var informDiv = document.getElementById("inform");
        var x = event.clientX;
        var y = event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if(x<divx1 || x>divx2 || y<divy1 || y>divy2){
            document.getElementById('inform').style.display = 'none';
        }
    });
    $('#Bird').on('mouseover',function (){
        $.ajax({
            type        :"GET",
            url         :"showWindowWhenMouseHover?CategoryId=Birds",
            success     :function (data){
                var inform = document.getElementById("inform");
                inform.innerText = data;
                inform.style.display = "block";
            }
        });
    });
    $('#Bird').on('mouseout',function (event){
        var informDiv = document.getElementById("inform");
        var x = event.clientX;
        var y = event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if(x<divx1 || x>divx2 || y<divy1 || y>divy2){
            document.getElementById('inform').style.display = 'none';
        }
    });
});
